<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性</title>
	</head>
	<body>
		<div id="app">
			
		<!-- 要求: 将用户输入的内容进行反转
						abc   cba
					 -->
		计算:<input type="text" v-model="msg" /><br />
		
		<!--
						1.将字符串拆分为数组 abc   [a,b,c]
						2.reverse() 将数组进行反转 [c,b,a]
						3.将数组拼接为字符串.join('连接符')
					 -->
		{{msg.split('').reverse().join('')}}<br />
		<!-- 计算属性的说明: 为了简化插值表达式,可以将计算的过程保存到计算属性中. -->
		{{reverseStr}}
		{{reverseStr}}
		{{reverseA()}}
		{{reverseA()}}
		<!-- 计算属性与方法的区别
						1.计算属性有缓存的操作 只执行一次.  效率更高
						2.计算属性调用时,只需要写属性名称 xxx
						3.用户每次调用都会执行方法.没有缓存操作
						4.方法调用时需要添加  xxx()
					 -->
		
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					msg: ''
				},
				//key:value 格式
				methods: {
						reverseA(){
							console.log("我是方法调用")
						return this.msg.split('').reverse().join('')
						}
					},
					//定义计算属性
				computed: {
					//必须有返回值
					reverseStr(){
						console.log("我是计算属性")
					return this.msg.split('').reverse().join('')
					}
				}
			})
		</script>
	</body>
</html>
